import 'package:ati_package/core/utils/ati_color.dart';
import 'package:ati_package/core/utils/ati_enum.dart';
import 'package:ati_package/pages/common/ati_scaffold.dart';
import 'package:ati_package/pages/common/widgets/ati_common_btn.dart';
import 'package:ati_package/pages/common/widgets/ati_text_input.dart';
import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../../../../core/utils/ati_assets.dart';
import '../../../../core/utils/ati_font.dart';
import '../../../common/widgets/ati_dropdown_overlay.dart';

class AddWalletView extends StatefulWidget {
  const AddWalletView({super.key});

  @override
  State<AddWalletView> createState() => _AddWalletViewState();
}

class _AddWalletViewState extends State<AddWalletView> {
  final _formKey = GlobalKey<FormBuilderState>();
  final LayerLink _layerLink = LayerLink(); // ✅ 新增

  @override
  Widget build(BuildContext context) {
    return AtiScaffold(
      title: '绑定钱包地址',
      body: SingleChildScrollView(
        child: Container(
          margin: EdgeInsets.symmetric(horizontal: 16.r),

          padding: EdgeInsets.symmetric(vertical: 16.r),
          child: Column(
            children: [
              _buildWalletSelect(),
              _buildTextInput(),

              AtiCommonBtn(
                onPressed: () {},
                titleStr: '提交',
                margin: EdgeInsets.only(top: 68.r, left: 20.r, right: 20.r),
              ),
            ],
          ),
        ),
      ),
    );
  }

  _buildWalletSelect() {
    return Container(
      height: 56.r,
      padding: EdgeInsets.symmetric(horizontal: 12.r),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8.r),
      ),
      child: Row(
        children: [
          Image.asset(
            width: 20.r,
            height: 20.r,
            AtiAssets.userUsdtIcon,
            package: 'ati_package',
          ),
          SizedBox(width: 6.r),
          Text(
            'USDT',
            style: TextStyle(
              fontSize: AtiFont.font16,
              color: AtiColor.textColor1,
              fontWeight: FontWeight.w600,
            ),
          ),
        ],
      ),
    );
  }

  _buildTextInput() {
    return Container(
      margin: EdgeInsets.only(top: 12.5.r),
      padding: EdgeInsets.only(
        top: 12.5.r,
        bottom: 12.5,
        left: 16.r,
        right: 16.r,
      ),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8.r),
      ),
      child: FormBuilder(
        key: _formKey,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            AtiTextInput(
              name: 'oldPassword',
              label: '地址',
              hint: '请输入地址',
              showClearButton: true,
              validator: (val) => val == null || val.isEmpty ? '请输入地址' : null,
            ),
            CompositedTransformTarget(
              link: _layerLink,
              child: Builder(
                builder: (fieldContext) {
                  return AtiTextInput(
                    name: 'sel',
                    label: '提币网络',
                    hint: '请选择提币网络',
                    showClearButton: true,
                    inputType: AtiInputType.select,
                    validator: (val) =>
                        val == null || val.isEmpty ? '请选择提币网络' : null,
                    onTap: () async {
                      _showDropdown(fieldContext);
                    },
                  );
                },
              ),
            ),
            AtiTextInput(
              name: 'oldPassword',
              label: '备注名称',
              hint: '请输入备注名称',
              showClearButton: true,
              validator: (val) => val == null || val.isEmpty ? '请输入备注名称' : null,
            ),
          ],
        ),
      ),
    );
  }

  void _showDropdown(BuildContext context) {
    AtiDropdownOverlay.show<String>(
      layerLink: _layerLink,
      options: ['TRC20', 'ERC20', 'BEP20'],
      selectedValue: 'TRC20',
      fieldContext: context,
      onSelected: (value) {
        _formKey.currentState?.fields['sel']!.didChange(value);
      },
    );
  }
}
